<template>
    <div class='gwc'>
        <div class="i"></div>   
        <mydizhi @click.native="tap"></mydizhi>
        <div class="d"></div>   
      <div class="lb"  >
            <div class="img"> <img :src="list.cover_img" alt=""></div>
              <p >{{list.instruction}}</p>
            <p class="nl">{{list.price/100 +'.00'}}</p>
             <p class="p">X1 </p>
          
        </div>
        <div class="tow">
           <span >购买数量</span>
          <van-stepper v-model="list.sales_num"  />
        </div>
  
        <myyhj></myyhj>
        <div class="tow4">
           <div>商品金额<span>{{list.price/100 +'.00'}}</span></div><br>
           <div>运费<span>0</span></div>
           <div>优惠劵金额<span class="ap">- <span v-if="show">20</span></span></div>
           <div>合计<span class="ap1">{{sum}}</span></div>
        </div>
        <div class="heji">
            <span class="an">实付价格：<span class="an1">{{sum}}</span>  </span>
            <button @click="tj" >提交订单</button>
        </div>
        
    </div>
</template>

<script>
import { getYuekeDetail } from "../../utils/api";
import mydizhi from "@/components/yueke/mydizhi";
import myyhj from "@/components/yueke/myyhj";
import { Dialog } from "vant";

export default {
  data() {
    return {
      show: "",
      id: this.$route.query.id,
      res: [],
      value: 1,
      list: [],
      
    };
  },
  mounted() {
    getYuekeDetail(this.id).then(res => {
      this.list = res.data;
    });
    // if(this.$route.query.key){
    //   let obj = this.$route.query.item
    // }
  },
  computed: {
    sum() {
      // if(this.time.price/100 +'.00'<100){
      //   return this.item.price/100 * this.item.sales_num +'.00'
      // }else{
      //   return this.item.price/100-20 * this.item.sales_num +'.00'
      // }
    }
  },
  methods: {
    tj() {
      Dialog.confirm({
        message: "您还没有添加地址，请添加地址"
      })
        .then(() => {
          // on confirm
          console.log(1);
        })
        .catch(() => {
          // on cancel
        });
    },

    tap() {
      if (this.$store.state.dizhiList.length != 0) {
        this.$router.push({ path: "/ClassAdddizhi", query: { key: 1 } });
      } else {
        this.$router.push("/Classjiadizhi");
      }
    }
  },
  components: {
    mydizhi,
    myyhj
  }
};
</script>

<style lang='scss' scoped>
.gwc {
  background-color: #f4f4f4;
  height: 100%;
}
.i {
  width: 100%;
  height: 10px;
}
.d {
  width: 100%;
  height: 10px;
}
.lb {
  width: 95%;
  height: 160px;
  border-radius: 9px;
  background-color: #fff;
  margin-left: 10px;

  display: flex;
  .img {
    width: 94px;
    height: 130px;
    margin-top: 15px;
    margin-left: 10px;
    border-radius: 5px;
    display: flex;
    img {
      width: 100%;
      border-radius: 5px;
    }
  }
  .name {
    width: 195px;
    height: 30px;
    font-size: 16px;
    margin-top: 20px;
    margin-left: 20px;
    span {
      height: 20px;
      font-size: 10px;
      margin-left: 8px;
      color: rgb(241, 122, 42);
    }
  }
  p {
    margin-top: 20px;
    margin-left: 20px;
    font-size: 18px;
    display: flex;
  }
  .nl {
    color: rgb(255, 0, 0);
    // top: 20px;
    height: 20px;
    font-size: 20px;
    margin-top: 80px;
    margin-left: 100px;
    display: flex;
  }
  .p {
    color: rgb(124, 124, 124);
    // top: 20px;
    height: 20px;
    // font-size: 20px;
    margin-top: 110px;
  }
}
.tow {
  border-radius: 10px;
  background-color: #fff;
  width: 95%;
  height: 40px;
  display: flex;
  align-items: center;
  margin: 7px auto;
  justify-content: space-between;
  padding: 0 10px;
}

.tow4 {
  border-radius: 10px;
  background-color: #fff;
  width: 95%;
  height: 170px;
  // display: flex;
  margin-left: 10px;
  margin-top: 10px;
  div {
    margin-top: 10px;
    font-size: 15px;
    margin-left: 10px;
    width: 95%;
    // border: 1px rgb(235, 233, 233) solid;
    height: 30px;
    line-height: 30px;
  }
  span {
    float: right;
  }
  .in {
    text-align: center;
  }
  .ap1 {
    color: rgb(255, 0, 0);
  }
}
.heji {
  width: 100%;
  background-color: #fff;
  height: 60px;
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 16px;
  button {
    width: 150px;
    height: 35px;
    border-radius: 50px;
    border: 1px red solid;
    background-color: red;
    color: #fff;
    margin-left: 10px;
  }

  .an1 {
    color: rgb(255, 0, 0);
  }
}
</style>
